<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <title>jQuery多级展开手风琴竖向菜单DEMO演示</title>
     <link rel="stylesheet" href="static/css/reset.css">
     <link rel="stylesheet" href="static/css/iconfont_1.css" />
     <link rel="stylesheet" href="static/css/search.css">
     <link rel="stylesheet" href="static/css/modal.css">
</head>

<body>
     <div class="search">
          <!-- 头部 -->
          <div class="search-header tc clearfix">
               <div class="search-box">
                    <div class="header-title fl">记录小康工程</div>
                    <div class="header-title-area fl">迪庆州数据库</div>
                    <div class="header-home fr"><i class="iconfont icon-home"></i> 首页</div>
               </div>

          </div>
          <!-- 检索主体 -->
          <div class="main">
               <!-- 搜索区域 -->
               <div class="search-input">
                    <div class="add-box">
                         <span class="add-tags" onclick="commonModel('addTagsModel','add-tags')">添加标签<i
                                   class="iconfont iconjiantou"></i> </span>
                         <span class="add-areas" onclick="commonModel('addAreaModel','add-areas')">添加区域<i
                                   class="iconfont iconjiantou"></i> </span>
                    </div>
                    <div class="add-box">
                         <span class="current-type">当前分类:</span>
                         <div class="typeList">
                              <div class="current-tags">
                                   <span>有关新闻报道</span>
                                   <span class="current-x" data-ids="99" onclick="addDelete('99')">x</span>
                              </div>
                         </div>

                    </div>
                    <div class="add-search tc">
                         <input class="search-text fl" type="text">
                         <i onclick="upSearch()" class="iconfont iconsousuo1 search-icon"></i>
                    </div>
               </div>
               <!-- 内容区域 -->
               <div class="search-channel">
                    <!-- 搜索左侧栏目 -->
                    <div class="channel-channel-list">
                         <div class="channel-list">
                              <ul>
                                   <li class="level">
                                        <p>有关新闻报道</p>
                                        <span class="addIcon">+</span>
                                   </li>
                                   <div class="showBox">
                                        <ul style="display: none">
                                             <li class="lowlevel">央视新记录迪庆州建设视频</li>
                                             <li class="lowlevel">德钦县巩固拓展脱贫攻坚成果同</li>
                                             <li class="lowlevel">迪庆州坚持扶贫工作开展</li>
                                             <li class="lowlevel">云南政府严厉整治旅游乱收费现象</li>
                                        </ul>
                                   </div>
                                   <li class="level">
                                        <p>云南全面建设小康 社会系列年鉴</p>
                                        <span class="addIcon">+</span>
                                   </li>
                                   <div class="showBox">
                                        <ul style="display: none">
                                             <li class="lowlevel">维权办</li>
                                             <li class="lowlevel">《美术》杂志社/li>
                                        </ul>
                                   </div>
                                   <li class="level">
                                        <p>有关理论文章</p>
                                        <span class="addIcon">+</span>
                                   </li>
                                   <div class="showBox">
                                        <ul style="display: none">
                                             <li class="lowlevel">中国文联美术艺术中心</li>
                                             <li class="lowlevel">中国文联美术艺术中心</li>
                                             <li class="lowlevel">《美术》杂志社</li>
                                        </ul>
                                   </div>
                                   <li class="level">
                                        <p>有关课题报告</p>
                                        <span class="addIcon">+</span>
                                   </li>
                                   <div class="showBox">
                                        <ul style="display: none">
                                             <li class="lowlevel">中国文联美术艺术中心</li>
                                             <li class="lowlevel">中国文联美术艺术中心</li>
                                             <li class="lowlevel">《美术》杂志社</li>
                                        </ul>
                                   </div>
                                   <li class="level">
                                        <p>实物资料</p>
                                        <span class="addIcon">+</span>
                                   </li>
                                   <div class="showBox">
                                        <ul style="display: none">
                                             <li class="lowlevel">中国文联美术艺术中心</li>
                                             <li class="lowlevel">中国文联美术艺术中心</li>
                                             <li class="lowlevel">《美术》杂志社</li>
                                        </ul>
                                   </div>
                                   <li class="level">
                                        <p>重大工程项目资料</p>
                                        <span class="addIcon">+</span>
                                   </li>
                                   <div class="showBox">
                                        <ul style="display: none">
                                             <li class="lowlevel">中国文联美术艺术中心</li>
                                             <li class="lowlevel">中国文联美术艺术中心</li>
                                             <li class="lowlevel">《美术》杂志社</li>
                                        </ul>
                                   </div>


                              </ul>
                         </div>
                    </div>
                    <!-- 搜索右侧内容 -->
                    <div class="search-content">
                         <div class="search-time">
                              <p>按时间搜索</p>
                              <ul>
                                   <li class="search-items active">全部时间</li>
                                   <li class="search-items">一天内</li>
                                   <li class="search-items">一周内</li>
                                   <li class="search-items">一月内</li>
                                   <li class="search-items">一年内</li>
                              </ul>
                         </div>

                         <div class="search-type">
                              <div class="type-items active">精确</div>
                              <div class="type-items noactive">模糊</div>
                         </div>
                         <div class="red-line"></div>
                         <div class="search-channel-list">
                              <div class="channel-list-items">
                                   <h3 class="show-ellipsis">德钦县巩固拓展脱贫攻坚成果同乡村振兴有效衔接</h3>
                                   <p class="ellipsis-2">
                                        观当代世相，讲中国故事。3月18日，央视新纪录·征集作品展播播出《下山》，该作品讲述了云南怒江脱贫之路，跟随镜头，一起来看这片曾经的贫困地区，如何脱贫奔小康。
                                   </p>
                                   <p class="public-time">发布时间: <span>2021-06-24 16:30:12</span></p>
                              </div>
                              <div class="channel-list-items">
                                   <h3 class="show-ellipsis">德钦县巩固拓展脱贫攻坚成果同乡村振兴有效衔接</h3>
                                   <p class="ellipsis-2">
                                        观当代世相，讲中国故事。3月18日，央视新纪录·征集作品展播播出《下山》，该作品讲述了云南怒江脱贫之路，跟随镜头，一起来看这片曾经的贫困地区，如何脱贫奔小康。
                                   </p>
                                   <p class="public-time">发布时间: <span>2021-06-24 16:30:12</span></p>
                              </div>
                              <div class="channel-list-items">
                                   <h3 class="show-ellipsis">德钦县巩固拓展脱贫攻坚成果同乡村振兴有效衔接</h3>
                                   <p class="ellipsis-2">
                                        观当代世相，讲中国故事。3月18日，央视新纪录·征集作品展播播出《下山》，该作品讲述了云南怒江脱贫之路，跟随镜头，一起来看这片曾经的贫困地区，如何脱贫奔小康。
                                   </p>
                                   <p class="public-time">发布时间: <span>2021-06-24 16:30:12</span></p>
                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>

     <div class="addTagsModel hide">
          <div class="addTagsModel-items">
               <p>政策法规</p>
               <ul>
                    <li class="addTagsName" data-id='1'>五年规划</li>
                    <li class="addTagsName" data-id='2'>地方性法规</li>
                    <li class="addTagsName" data-id='3'>党内政策法规</li>
                    <li class="addTagsName" data-id='4'>宪法</li>
                    <li class="addTagsName" data-id='5'>五年规划</li>
                    <li class="addTagsName" data-id='6'>行政法规</li>
                    <li class="addTagsName" data-id='7'>司法解释</li>
                    <li class="addTagsName" data-id='8'>行政法规</li>
                    <li class="addTagsName" data-id='9'>司法解释</li>
               </ul>
          </div>
     </div>
     <div class="addAreaModel hide">
          <div class="addTagsModel-items">
               <ul>
                    <li class="addTagsName" data-id='11'>法制</li>
                    <li class="addTagsName" data-id='12'>国际</li>
                    <li class="addTagsName" data-id='13'>军事</li>
                    <li class="addTagsName" data-id='14'>社会</li>
                    <li class="addTagsName" data-id='15'>经济</li>
                    <li class="addTagsName" data-id='16'>金融</li>
                    <li class="addTagsName" data-id='17'>房产</li>
                    <li class="addTagsName" data-id='18'>三农</li>
                    <li class="addTagsName" data-id='19'>能源</li>
                    <li class="addTagsName" data-id='19'>网信</li>
                    <li class="addTagsName" data-id='19'>交通</li>
                    <li class="addTagsName" data-id='19'>水利</li>
                    <li class="addTagsName" data-id='19'>环保</li>
                    <li class="addTagsName" data-id='19'>教育</li>
               </ul>
          </div>
     </div>
</body>
<script type="text/javascript" src="./static/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="./static/js/modal.js"></script>
<script type="text/javascript">
     $(document).ready(function () {
          initPage()
     });

     function initPage() {
          $('.level').click(function () {
               $(this).addClass('actives')
               if ($(this).next().children('ul').css('display') == 'none') {
                    $(this).siblings('li').removeClass('actives').next().find('li').removeClass(
                         'actives')
                    if ($(this).children('.addIcon').text() == '+') {
                         $(this).children('.addIcon').text('-')
                    }
                    $(this).siblings('li').children('.addIcon').text('+')
                    $(this).siblings('li').next().children('ul').slideUp(100);
                    $(this).next().children('ul').slideDown(100).children('li');
               } else {
                    if ($(this).children('.addIcon').text() == '+') {
                         $(this).children('.addIcon').text('-')
                    } else {
                         $(this).children('.addIcon').text('+')
                    }
                    $(this).siblings('li').children('.addIcon').text()
                    $(this).siblings('li').removeClass('actives').next().find('li')
                         .removeClass('actives')
                    $(this).siblings('li').next().children('ul').slideUp(100);
                    $(this).next().children('ul').slideUp(100);
               }

          })
          $('.lowlevel').click(function (event) {
               $(this).siblings('li').removeClass('actives');
               $(this).addClass('actives');
          })
          $('.search-items').click(function () {
               $(this).siblings('li').removeClass('active');
               $(this).addClass('active');
          })
          $('.type-items').click(function () {
               $(this).siblings().removeClass('active').addClass('noactive');
               $(this).addClass('active').removeClass('noactive');
          })

     }

     function commonModel(addTagsModel, modelName) {
          if($('.'+modelName).children('i').hasClass('iconjiantou')){
               $('.'+modelName).children('i').removeClass('iconjiantou').addClass('iconjiantousvg')
          }
          var addTagsModel = new mModal({
               title: modelName=='add-tags'?'添加标签':'添加区域',
               width: "818px",
               top: "30vh",
               modal: false,
               showCancelButton: false,
               showConfirmButton: false,
               content: $("." + addTagsModel).html(),
               confirm: function () {
                    addTagsModel.close();
               },
               cancel: function () {
                    addTagsModel.close();
               }
          });
          addTagsModel.renderDom()
          $('.addTagsName').click(function () {
               var idVal = $(this).attr('data-id')
               if ($(this).hasClass('active')) {
                    $(this).removeClass('active')
                    $('[data-ids=' + idVal + ']').remove();
               } else {
                    $(this).addClass('active');

                    var str = ` <div class="current-tags" data-ids=${idVal}>
                                   <span>${$(this).text()}</span> 
                              <span class="current-x" onclick="addDelete(${idVal})">x</span>
                         </div>`
                    $('.typeList').append(str)
               }
          })
          $('.m-modal__headerbtn').click(function () {
                    $('.'+modelName).children('i').removeClass('iconjiantousvg').addClass('iconjiantou')
            })
     }
    // 删除当前分类
     function addDelete(e) {
          $('[data-ids=' + e + ']').remove();
     }
</script>

</html>